<template>
  <div>
    <!-- 邀请码 -->
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>班级邀请</span>
        </div>
      </template>
      <div v-if="inviteInfo">
        <p><strong>邀请码:</strong> {{ inviteInfo.inviteCode }}</p>
        <p><strong>有效期至:</strong> {{ formatDateTime(inviteInfo.expiry) }}</p>
      </div>
      <el-button type="primary" @click="$emit('generate-code')" :loading="loading || generatingCode">
        {{ inviteInfo ? '重新生成' : '生成邀请码' }}
      </el-button>
      <p class="invite-tip">邀请码7天内有效，学生可通过邀请码加入班级。</p>
    </el-card>

    <!-- 统计信息 -->
    <el-card shadow="never" style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>班级统计</span>
          <el-button type="primary" link @click="$emit('refresh-stats')" :loading="loading || refreshingStats">刷新</el-button>
        </div>
      </template>
      <div v-if="stats" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
        <el-progress type="dashboard" :percentage="fillRatePercentage" :color="progressColors">
          <template #default="{ percentage }">
            <span class="percentage-value">{{ percentage?.toFixed(1) ?? 0 }}%</span>
            <span class="percentage-label">满员率</span>
          </template>
        </el-progress>
        <p style="text-align: center; margin-top: 10px;">
          当前人数: {{ stats.studentCount ?? 0 }} / {{ stats.capacity ?? 0 }}
        </p>
      </div>
      <el-empty v-else description="暂无统计信息"></el-empty>
    </el-card>
  </div>
</template>

<script setup>
/* global defineProps, defineEmits */
import { computed } from 'vue';
import { formatDateTime } from '@/utils/formatters';

const props = defineProps({
  inviteInfo: Object,
  stats: Object,
  loading: Boolean, // General loading from parent
  generatingCode: Boolean,
  refreshingStats: Boolean,
});

defineEmits(['generate-code', 'refresh-stats']);

// 统计图颜色
const progressColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
];

const fillRatePercentage = computed(() => {
    if (!props.stats || !props.stats.capacity || props.stats.capacity === 0) {
        return 0;
    }
    return (props.stats.studentCount / props.stats.capacity) * 100;
});

</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-card {
  margin-bottom: 20px;
}
.invite-tip {
    font-size: 12px;
    color: #909399;
    margin-top: 10px;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style> 